<template>
  <AdminLayout title="编辑分类" subtitle="修改分类信息">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- 左侧：分类表单 -->
      <div class="space-y-6">
        <div class="bg-white shadow-sm rounded-lg">
          <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">分类信息</h3>
          </div>
          
          <form @submit.prevent="submit" class="px-6 py-4 space-y-6">
            <!-- 分类名称 -->
            <div>
              <label for="name" class="block text-sm font-medium text-gray-700">
                分类名称 <span class="text-red-500">*</span>
              </label>
              <input 
                id="name"
                v-model="form.name"
                type="text" 
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
                :class="{ 'border-red-300': errors.name }"
                placeholder="请输入分类名称"
              />
              <p v-if="errors.name" class="mt-1 text-sm text-red-600">{{ errors.name }}</p>
            </div>

            <!-- 分类别名 -->
            <div>
              <label for="slug" class="block text-sm font-medium text-gray-700">
                分类别名
              </label>
              <input 
                id="slug"
                v-model="form.slug"
                type="text" 
                readonly
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm bg-gray-50 text-gray-500 cursor-not-allowed sm:text-sm"
                placeholder="分类别名不可修改"
              />
              <div class="mt-1 bg-blue-50 border border-blue-200 rounded-md p-3">
                <div class="flex">
                  <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">分类别名不可修改</h3>
                    <div class="mt-1 text-sm text-blue-700">
                      <p>分类别名用于URL标识，一旦创建后不可修改，以确保链接的稳定性和SEO效果。</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分类描述 -->
            <div>
              <label for="description" class="block text-sm font-medium text-gray-700">
                分类描述
              </label>
              <textarea 
                id="description"
                v-model="form.description"
                rows="3"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
                :class="{ 'border-red-300': errors.description }"
                placeholder="请输入分类描述"
              ></textarea>
              <p v-if="errors.description" class="mt-1 text-sm text-red-600">{{ errors.description }}</p>
            </div>

            <!-- 排序顺序 -->
            <div>
              <label for="sort_order" class="block text-sm font-medium text-gray-700">
                排序顺序
              </label>
              <input 
                id="sort_order"
                v-model.number="form.sort_order"
                type="number" 
                min="0"
                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
                :class="{ 'border-red-300': errors.sort_order }"
                placeholder="0"
              />
              <p v-if="errors.sort_order" class="mt-1 text-sm text-red-600">{{ errors.sort_order }}</p>
              <p class="mt-1 text-sm text-gray-500">数字越小排序越靠前</p>
            </div>

            <!-- 状态 -->
            <div>
              <div class="flex items-center">
                <input 
                  id="is_active"
                  v-model="form.is_active"
                  type="checkbox" 
                  class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded"
                />
                <label for="is_active" class="ml-2 block text-sm text-gray-900">
                  启用此分类
                </label>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
              <Link :href="route('admin.categories.index')" 
                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
                取消
              </Link>
              <button 
                type="submit" 
                :disabled="processing"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
              >
                <svg v-if="processing" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                {{ processing ? '更新中...' : '更新分类' }}
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- 右侧：分类下的产品 -->
      <div class="space-y-6">
        <div class="bg-white shadow-sm rounded-lg">
          <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
              <h3 class="text-lg font-medium text-gray-900">分类产品</h3>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                {{ products.length }} 个产品
              </span>
            </div>
          </div>
          
          <div class="px-6 py-4">
            <!-- 产品列表 -->
            <div v-if="products.length > 0" class="space-y-4">
              <div v-for="product in products" :key="product.id" class="flex items-center space-x-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200">
                <!-- 产品图片 -->
                <div class="flex-shrink-0">
                  <img v-if="product.images && product.images.length > 0" 
                       :src="product.images[0].url" 
                       :alt="product.name"
                       class="h-16 w-16 object-cover rounded-lg"
                  />
                  <div v-else class="h-16 w-16 bg-gray-200 rounded-lg flex items-center justify-center">
                    <svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                  </div>
                </div>
                
                <!-- 产品信息 -->
                <div class="flex-1 min-w-0">
                  <h4 class="text-sm font-medium text-gray-900 truncate">
                    {{ product.name }}
                  </h4>
                  <p class="text-sm text-gray-500 truncate">
                    {{ product.description || '暂无描述' }}
                  </p>
                  <div class="mt-1 flex items-center space-x-4">
                    <span class="text-sm font-medium text-gray-900">
                      ¥{{ formatPrice(product.price) }}
                    </span>
                    <span v-if="product.compare_price" class="text-sm text-gray-500 line-through">
                      ¥{{ formatPrice(product.compare_price) }}
                    </span>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
                          :class="product.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
                      {{ product.is_active ? '已启用' : '已禁用' }}
                    </span>
                    <span v-if="product.is_featured" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                      推荐
                    </span>
                  </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="flex-shrink-0">
                  <Link :href="route('products.edit', product.id)" 
                        class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
                    编辑
                  </Link>
                </div>
              </div>
            </div>
            
            <!-- 空状态 -->
            <div v-else class="text-center py-12">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
              </svg>
              <h3 class="mt-2 text-sm font-medium text-gray-900">暂无产品</h3>
              <p class="mt-1 text-sm text-gray-500">该分类下还没有产品</p>
              <div class="mt-6">
                <Link :href="route('products.create')" 
                      class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
                  <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  添加产品
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref } from 'vue'
import { Link, useForm } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'

const props = defineProps({
  category: {
    type: Object,
    required: true
  },
  products: {
    type: Array,
    default: () => []
  }
})

const form = useForm({
  name: props.category.name,
  slug: props.category.slug,
  description: props.category.description,
  sort_order: props.category.sort_order,
  is_active: props.category.is_active,
})

const processing = ref(false)

const submit = () => {
  processing.value = true
  form.put(route('admin.categories.update', props.category.id), {
    onFinish: () => {
      processing.value = false
    }
  })
}

const formatPrice = (price) => {
  return new Intl.NumberFormat('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(price)
}

const errors = form.errors
</script>
